<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>InsCode - 在线代码编辑器</title>
    <style>
        :root {
            --primary-color: #2563eb;
            --primary-hover: #1d4ed8;
            --success-color: #10b981;
            --success-hover: #059669;
            --warning-color: #f59e0b;
            --warning-hover: #d97706;
            --danger-color: #ef4444;
            --danger-hover: #dc2626;
            --info-color: #06b6d4;
            --info-hover: #0891b2;
            --bg-primary: #ffffff;
            --bg-secondary: #f8fafc;
            --bg-tertiary: #f1f5f9;
            --bg-dark: #1e293b;
            --text-primary: #1e293b;
            --text-secondary: #475569;
            --text-muted: #64748b;
            --text-light: #ffffff;
            --border-color: #e2e8f0;
            --border-hover: #cbd5e1;
            --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
            --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
            --radius-sm: 0.375rem;
            --radius-md: 0.5rem;
            --radius-lg: 0.75rem;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            background: var(--bg-primary);
            color: var(--text-primary);
            overflow: hidden;
            height: 100vh;
        }

        /* 顶部导航栏 */
        .top-navbar {
            height: 60px;
            background: var(--bg-primary);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            box-shadow: var(--shadow-sm);
            z-index: 1000;
        }

        .nav-left {
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .logo {
            font-size: 24px;
            font-weight: 800;
            color: #007acc;
            text-decoration: none;
        }

        .project-selector {
            position: relative;
            display: inline-block;
        }

        .project-dropdown {
            background: #f3f3f3;
            border: 1px solid #d1d1d1;
            border-radius: var(--radius-md);
            padding: 8px 16px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            color: #333333;
            transition: all 0.2s ease;
        }

        .project-dropdown:hover {
            background: #e8e8e8;
            border-color: #b8b8b8;
        }

        .nav-center {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .nav-button {
            padding: 8px 16px;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            background: var(--bg-primary);
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 14px;
            transition: all 0.2s ease;
        }

        .nav-button:hover {
            background: var(--bg-secondary);
            border-color: var(--border-hover);
        }

        .nav-button.primary {
            background: #007acc;
            color: #ffffff;
            border-color: #007acc;
        }

        .nav-button.primary:hover {
            background: #005a9e;
        }

        .nav-right {
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .status-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 12px;
            color: var(--text-muted);
        }

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--success-color);
        }

        .user-menu {
            display: flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            padding: 8px;
            border-radius: var(--radius-md);
            transition: background 0.2s ease;
        }

        .user-menu:hover {
            background: var(--bg-secondary);
        }

        .user-avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: #4ec9b0;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffffff;
            font-weight: 600;
            font-size: 12px;
        }

        /* 主容器 */
        .main-container {
            display: flex;
            height: calc(100vh - 60px);
        }

        /* 左侧面板 */
        .left-panel {
            width: 280px;
            background: var(--bg-secondary);
            border-right: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
        }

        .panel-tabs {
            display: flex;
            border-bottom: 1px solid var(--border-color);
        }

        .panel-tab {
            flex: 1;
            padding: 12px 16px;
            text-align: center;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.2s ease;
            font-size: 14px;
            color: var(--text-secondary);
        }

        .panel-tab.active {
            color: #007acc;
            border-bottom-color: #007acc;
            background: var(--bg-primary);
        }

        .panel-tab:hover {
            background: var(--bg-tertiary);
        }

        .panel-content {
            flex: 1;
            overflow: hidden;
        }

        .panel-section {
            display: none;
            height: 100%;
            overflow: hidden;
        }

        .panel-section.active {
            display: block;
        }

        /* 文件浏览器 */
        .file-browser {
            padding: 16px;
            height: 100%;
            overflow-y: auto;
        }

        .file-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 16px;
            padding: 10px;
            border-bottom: 1px solid var(--border-color);
        }

        .file-action-btn {
            padding: 6px 12px;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            background: var(--bg-primary);
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 12px;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 4px;
            min-width: 80px;
            justify-content: center;
        }

        .file-action-btn:hover {
            background: var(--bg-secondary);
            border-color: var(--border-hover);
            color: var(--text-primary);
            transform: translateY(-1px);
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        .file-action-btn:active {
            transform: translateY(0);
        }

        .file-tree {
            font-size: 14px;
        }

        .python-label {
            font-size: 12px;
            font-weight: 600;
            color: var(--text-muted);
            padding: 8px 0 4px 0;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .file-item {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 8px;
            cursor: pointer;
            border-radius: var(--radius-sm);
            transition: background 0.2s ease;
        }

        .file-item:hover {
            background: var(--bg-tertiary);
        }

        .file-item.active {
            background: #007acc;
            color: #ffffff;
        }

        .file-icon {
            width: 16px;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .file-name {
            flex: 1;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        /* 中央代码编辑器 */
        .center-panel {
            flex: 1;
            display: flex;
            flex-direction: column;
            background: var(--bg-primary);
        }

        .editor-tabs {
            height: 40px;
            background: var(--bg-secondary);
            border-bottom: 1px solid var(--border-color);
            display: flex;
            align-items: center;
            overflow-x: auto;
        }

        .editor-tab {
            padding: 8px 16px;
            background: var(--bg-secondary);
            border-right: 1px solid var(--border-color);
            cursor: pointer;
            font-size: 14px;
            color: var(--text-secondary);
            white-space: nowrap;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .editor-tab.active {
            background: var(--bg-primary);
            color: var(--text-primary);
            border-bottom: 2px solid #007acc;
        }

        .editor-tab:hover {
            background: var(--bg-tertiary);
        }

        .tab-close {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.2s ease;
        }

        .tab-close:hover {
            background: var(--border-color);
        }

        .code-editor-container {
            display: flex;
            flex: 1;
            background: #1e1e1e;
            position: relative;
            overflow: hidden;
        }

        .code-editor {
            flex: 1;
            border: none;
            outline: none;
            padding: 16px;
            font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
            font-size: 14px;
            line-height: 1.6;
            color: #d4d4d4;
            background: transparent;
            resize: none;
            tab-size: 4;
            overflow: auto;
        }

        .code-editor::placeholder {
            color: #858585;
        }

        .code-editor:focus {
            outline: none;
        }

        .editor-toolbar {
            position: absolute;
            top: 10px;
            right: 20px;
            display: flex;
            gap: 8px;
        }

        .editor-btn {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
            padding: 8px 16px;
            border-radius: var(--radius-md);
            cursor: pointer;
            font-size: 13px;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .language-selector {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
            padding: 8px 12px;
            border-radius: var(--radius-md);
            cursor: pointer;
            font-size: 13px;
            transition: all 0.2s ease;
            min-width: 120px;
        }

        .language-selector:hover {
            border-color: var(--border-hover);
            background: var(--bg-tertiary);
        }

        .language-selector:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
        }

        .editor-btn:hover {
            background: var(--bg-secondary);
        }

        .editor-btn.run {
            background: #28a745;
            color: #ffffff;
            border-color: #28a745;
        }

        .editor-btn.run:hover {
            background: #218838;
        }

        .editor-content {
            flex: 1;
            display: flex;
            overflow: hidden;
            position: relative;
        }

        .code-lines {
            width: 50px;
            background: #252526;
            border-right: 1px solid #3c3c3c;
            padding: 16px 8px;
            text-align: right;
            font-family: 'Fira Code', monospace;
            font-size: 12px;
            color: #858585;
            user-select: none;
            line-height: 1.6;
        }

        .line-number {
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding-right: 8px;
        }

        .code-editor {
            flex: 1;
            border: none;
            outline: none;
            padding: 16px;
            font-family: 'Fira Code', monospace;
            font-size: 14px;
            line-height: 1.6;
            color: var(--text-primary);
            background: transparent;
            resize: none;
            tab-size: 4;
        }

        .code-editor::placeholder {
            color: var(--text-muted);
        }

        .code-text {
            flex: 1;
            padding: 16px 0;
            font-family: 'Fira Code', monospace;
            font-size: 14px;
            line-height: 1.6;
            color: #d4d4d4;
        }

        .code-line {
            height: 20px;
            display: flex;
            align-items: center;
            padding-left: 16px;
        }

        /* 右侧 AI 助手面板 */
        .right-panel {
            width: 320px;
            background: var(--bg-primary);
            border-left: 1px solid var(--border-color);
            display: flex;
            flex-direction: column;
        }

        .ai-header {
            padding: 16px;
            border-bottom: 1px solid var(--border-color);
            background: var(--bg-secondary);
        }

        .ai-title {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-primary);
            margin-bottom: 8px;
        }

        .ai-subtitle {
            font-size: 12px;
            color: var(--text-muted);
        }

        .ai-chat {
            flex: 1;
            overflow-y: auto;
            padding: 16px;
        }

        .chat-message {
            margin-bottom: 16px;
            display: flex;
            gap: 12px;
        }

        .message-avatar {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 14px;
            flex-shrink: 0;
        }

        .message-avatar.user {
            background: var(--primary-color);
            color: var(--text-light);
        }

        .message-avatar.ai {
            background: var(--success-color);
            color: var(--text-light);
        }

        .message-content {
            flex: 1;
            background: var(--bg-secondary);
            padding: 12px;
            border-radius: var(--radius-md);
            font-size: 14px;
            line-height: 1.5;
        }

        .message-content.user {
            background: var(--primary-color);
            color: var(--text-light);
        }

        .ai-input {
            padding: 16px;
            border-top: 1px solid var(--border-color);
            background: var(--bg-secondary);
        }

        .input-container {
            position: relative;
        }

        .ai-textarea {
            width: 100%;
            min-height: 80px;
            padding: 12px;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            resize: vertical;
            font-family: inherit;
            font-size: 14px;
            line-height: 1.5;
            background: var(--bg-primary);
            color: var(--text-primary);
        }

        .ai-textarea:focus {
            outline: none;
            border-color: #007acc;
            box-shadow: 0 0 0 3px rgba(0, 122, 204, 0.1);
        }

        .input-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 8px;
        }

        .input-info {
            font-size: 12px;
            color: var(--text-muted);
        }

        .send-button {
            padding: 8px 16px;
            background: #007acc;
            color: #ffffff;
            border: none;
            border-radius: var(--radius-md);
            cursor: pointer;
            font-size: 14px;
            transition: background 0.2s ease;
        }

        .send-button:hover {
            background: #005a9e;
        }

        .send-button:disabled {
            background: #6c757d;
            cursor: not-allowed;
        }

        .ai-actions {
            display: flex;
            gap: 8px;
            margin-top: 16px;
        }

        .ai-action-btn {
            padding: 8px 12px;
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            background: var(--bg-primary);
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 12px;
            transition: all 0.2s ease;
            flex: 1;
        }

        .ai-action-btn:hover {
            background: var(--bg-secondary);
            border-color: var(--border-hover);
            color: var(--text-primary);
        }

        /* 底部终端栏 */
        .bottom-panel {
            height: 200px;
            background: #1e1e1e;
            border-top: 1px solid #3c3c3c;
            display: flex;
            flex-direction: column;
        }

        .terminal-header {
            height: 32px;
            background: #2d2d30;
            border-bottom: 1px solid #3c3c3c;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
        }

        .terminal-title {
            font-size: 12px;
            font-weight: 600;
            color: #cccccc;
        }

        .terminal-actions {
            display: flex;
            gap: 8px;
        }

        .terminal-btn {
            padding: 4px 8px;
            border: 1px solid #3c3c3c;
            border-radius: var(--radius-sm);
            background: #2d2d30;
            color: #cccccc;
            cursor: pointer;
            font-size: 11px;
            transition: all 0.2s ease;
        }

        .terminal-btn:hover {
            background: #3c3c3c;
        }

        .terminal-content {
            flex: 1;
            padding: 16px;
            color: #cccccc;
            font-family: 'Fira Code', 'Monaco', 'Consolas', monospace;
            font-size: 13px;
            line-height: 1.4;
            overflow-y: auto;
        }

        .terminal-line {
            margin-bottom: 4px;
            padding: 4px 16px;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            line-height: 1.4;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .terminal-prompt {
            color: #00ff00;
            font-weight: bold;
            margin-right: 8px;
        }

        .terminal-command {
            color: #ffffff;
        }

        .terminal-output {
            color: #e5e7eb;
            padding-left: 24px;
        }

        .terminal-error {
            color: #f87171;
            padding-left: 24px;
        }

        .terminal-info {
            color: #60a5fa;
            padding-left: 24px;
            font-style: italic;
        }

        .terminal-line.error {
            background: rgba(239, 68, 68, 0.1);
        }

        /* 响应式设计 */
        @media (max-width: 1200px) {
            .left-panel {
                width: 240px;
            }
            .right-panel {
                width: 280px;
            }
        }

        @media (max-width: 768px) {
            .left-panel {
                width: 200px;
            }
            .right-panel {
                width: 240px;
            }
            .nav-center {
                display: none;
            }
        }

        /* 滚动条样式 */
        ::-webkit-scrollbar {
            width: 8px;
            height: 8px;
        }

        ::-webkit-scrollbar-track {
            background: var(--bg-secondary);
        }

        ::-webkit-scrollbar-thumb {
            background: var(--border-color);
            border-radius: var(--radius-sm);
        }

        ::-webkit-scrollbar-thumb:hover {
            background: var(--border-hover);
        }

        /* 动画效果 */
        .fade-in {
            animation: fadeIn 0.3s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        .slide-in {
            animation: slideIn 0.3s ease;
        }

        @keyframes slideIn {
            from { transform: translateX(-20px); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }

        /* 页面加载动画 */
        .page-loading {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--bg-primary);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            transition: opacity 0.5s ease;
        }

        .page-loading.hidden {
            opacity: 0;
            pointer-events: none;
        }

        .loading-spinner {
            width: 50px;
            height: 50px;
            border: 3px solid var(--border-color);
            border-top: 3px solid #007acc;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        .loading-text {
            margin-top: 20px;
            color: var(--text-secondary);
            font-size: 16px;
        }

        /* 移动端优化 */
        @media (max-width: 768px) {
            .main-container {
                grid-template-columns: 1fr;
                grid-template-rows: auto auto 1fr auto;
            }
            
            .left-panel {
                width: 100%;
                height: auto;
                max-height: 200px;
            }
            
            .right-panel {
                width: 100%;
                height: 300px;
            }
            
            .center-panel {
                min-height: 400px;
            }
        }

        /* 暗色主题支持 */
        .dark-theme {
            --bg-primary: #1a1a1a;
            --bg-secondary: #2d2d2d;
            --bg-tertiary: #3d3d3d;
            --text-primary: #ffffff;
            --text-secondary: #cccccc;
            --text-muted: #999999;
            --border-color: #404040;
            --border-hover: #505050;
        }

        .dark-theme .left-panel {
            background: var(--bg-secondary);
            border-right-color: var(--border-color);
        }

        .dark-theme .center-panel {
            background: var(--bg-primary);
        }

        .dark-theme .right-panel {
            background: var(--bg-secondary);
            border-left-color: var(--border-color);
        }

        .dark-theme .code-editor {
            background: var(--bg-primary);
            color: var(--text-primary);
        }

        /* 工具提示 */
        .tooltip {
            position: relative;
        }

        .tooltip::after {
            content: attr(data-tooltip);
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            background: var(--text-primary);
            color: var(--bg-primary);
            padding: 5px 10px;
            border-radius: 4px;
            font-size: 12px;
            white-space: nowrap;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s;
            z-index: 1000;
        }

        .tooltip:hover::after {
            opacity: 1;
        }

        /* 加载状态 */
        .loading {
            opacity: 0.6;
            pointer-events: none;
        }

        .loading::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 20px;
            height: 20px;
            margin: -10px 0 0 -10px;
            border: 2px solid transparent;
            border-top: 2px solid #007acc;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to {
                transform: rotate(360deg);
            }
        }

        @keyframes slideInRight {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        @keyframes slideOutRight {
            from {
                transform: translateX(0);
                opacity: 1;
            }
            to {
                transform: translateX(100%);
                opacity: 0;
            }
        }

        /* 状态指示器样式 */
        .status-indicator {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 4px 8px;
            border-radius: var(--radius-sm);
            background: var(--bg-secondary);
            font-size: 12px;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--success-color);
            animation: pulse 2s infinite;
        }

        /* 底部状态栏样式 */
        .bottom-statusbar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 32px;
            background: #007acc;
            border-top: 1px solid #005a9e;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
            font-size: 12px;
            z-index: 1000;
        }

        .status-left, .status-center, .status-right {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .status-item {
            color: #ffffff;
            padding: 4px 8px;
            border-radius: var(--radius-sm);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .status-item:hover {
            background: rgba(255, 255, 255, 0.1);
            color: #ffffff;
        }

        .status-btn {
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: #ffffff;
            padding: 2px 8px;
            border-radius: var(--radius-sm);
            font-size: 11px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .status-btn:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.5);
        }

        .status-btn.premium {
            background: linear-gradient(135deg, #ffd700, #ffb347);
            color: #000000;
            border-color: #ffb347;
            font-weight: 600;
        }

        .status-btn.premium:hover {
            background: linear-gradient(135deg, #ffb347, #ff8c00);
            transform: translateY(-1px);
        }

        /* 调整主容器底部边距，为状态栏留出空间 */
        .main-container {
            margin-bottom: 32px;
        }

        /* 优化编辑器标签样式 */
        .editor-tab {
            position: relative;
        }

        .editor-tab.active::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: #007acc;
        }

        /* 优化文件图标样式 */
        .file-icon {
            width: 18px;
            height: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px;
        }

        /* 优化状态指示器样式 */
        .status-indicator {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 12px;
            padding: 4px 8px;
        }

        .status-dot {
            background: var(--success-color);
            box-shadow: 0 0 4px var(--success-color);
        }

        .run-status {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--primary-color);
            font-size: 13px;
            padding: 8px 12px;
            background: rgba(37, 99, 235, 0.1);
            border-radius: var(--radius-md);
            border: 1px solid rgba(37, 99, 235, 0.2);
        }

        .status-spinner {
            width: 16px;
            height: 16px;
            border: 2px solid rgba(37, 99, 235, 0.3);
            border-top: 2px solid var(--primary-color);
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* 执行历史记录样式 */
        .execution-history {
            margin-top: 20px;
            border-top: 1px solid var(--border-color);
            padding-top: 20px;
        }

        .history-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;
        }

        .history-header h4 {
            margin: 0;
            color: var(--text-primary);
            font-size: 14px;
            font-weight: 600;
        }

        .clear-history-btn {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            color: var(--text-secondary);
            padding: 4px 8px;
            border-radius: var(--radius-sm);
            font-size: 11px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .clear-history-btn:hover {
            background: var(--bg-tertiary);
            border-color: var(--border-hover);
        }

        .history-list {
            max-height: 200px;
            overflow-y: auto;
        }

        .history-item {
            background: var(--bg-secondary);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-sm);
            padding: 12px;
            margin-bottom: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .history-item:hover {
            background: var(--bg-tertiary);
            border-color: var(--border-hover);
        }

        .history-item.success {
            border-left: 4px solid var(--success-color);
        }

        .history-item.error {
            border-left: 4px solid var(--danger-color);
        }

        .history-item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 8px;
        }

        .history-language {
            background: var(--primary-color);
            color: white;
            padding: 2px 6px;
            border-radius: var(--radius-sm);
            font-size: 10px;
            font-weight: 600;
        }

        .history-time {
            color: var(--text-muted);
            font-size: 11px;
        }

        .history-output {
            color: var(--text-secondary);
            font-size: 12px;
            font-family: 'Courier New', monospace;
            white-space: pre-wrap;
            max-height: 60px;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .history-output.expanded {
            max-height: none;
        }
    </style>
</head>
<body>
    <!-- 页面加载动画 -->
    <div class="page-loading" id="pageLoading">
        <div style="text-align: center;">
            <div class="loading-spinner"></div>
            <div class="loading-text">正在加载在线IDE...</div>
        </div>
    </div>

    <!-- 顶部导航栏 -->
    <div class="top-navbar">
        <div class="nav-left">
            <a href="#" class="logo">InsCode</a>
            <div class="project-selector">
                <div class="project-dropdown">
                    <span>Python测试</span>
                    <span>▼</span>
                </div>
            </div>
        </div>
        
        <div class="nav-center">
            <button class="nav-button">发布</button>
            <button class="nav-button">+</button>
        </div>
        
        <div class="nav-right">
            <div class="status-indicator">
                <div class="status-dot"></div>
                <span>CPU: 12%</span>
            </div>
            <div class="status-indicator">
                <div class="status-dot"></div>
                <span>RAM: 45%</span>
            </div>
            <button class="nav-button">新建</button>
            <button class="nav-button">历史</button>
            <button class="nav-button primary">AI</button>
            <button class="nav-button">部署</button>
            <button class="nav-button theme-toggle" title="切换主题">🌙</button>
            <div class="user-menu">
                <div class="user-avatar">boogie0005</div>
                <span>boogie0005</span>
            </div>
        </div>
    </div>

    <!-- 主容器 -->
    <div class="main-container">
        <!-- 左侧面板 -->
        <div class="left-panel">
            <div class="panel-tabs">
                <div class="panel-tab active" data-tab="preview">预览</div>
                <div class="panel-tab" data-tab="code">代码</div>
            </div>
            
            <div class="panel-content">
                <!-- 预览面板 -->
                <div class="panel-section active" id="preview-section">
                    <div style="padding: 20px; text-align: center; color: var(--text-muted);">
                        <div style="font-size: 48px; margin-bottom: 16px;">👁️</div>
                        <div>预览模式</div>
                        <div style="font-size: 12px; margin-top: 8px;">在这里显示代码运行结果</div>
                    </div>
                </div>
                
                <!-- 代码文件面板 -->
                <div class="panel-section" id="code-section">
                    <div class="file-browser">
                        <div class="file-actions">
                            <button class="file-action-btn file-new">📄 新建文件</button>
                            <button class="file-action-btn folder-new">📁 新建文件夹</button>
                            <button class="file-action-btn file-upload">📤 上传</button>
                            <button class="file-action-btn file-download">📥 下载</button>
                        </div>
                        
                        <div class="file-tree">
                            <div class="python-label">Python</div>
                            <div class="file-item" data-file=".inscode">
                                <div class="file-icon">📁</div>
                                <div class="file-name">.inscode</div>
                            </div>
                            <div class="file-item active" data-file="01 a.py">
                                <div class="file-icon">🐍</div>
                                <div class="file-name">01 a.py</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 中央代码编辑器 -->
        <div class="center-panel">
            <div class="editor-tabs">
                <div class="editor-tab active" data-file="01 a.py">
                    <span>01 a.py</span>
                    <div class="tab-close">×</div>
                </div>
            </div>
            
            <div class="editor-content">
                <div class="editor-toolbar">
                    <select class="language-selector" id="languageSelector">
                        <option value="python">🐍 Python</option>
                        <option value="java">☕ Java</option>
                        <option value="cpp">⚡ C++</option>
                        <option value="javascript">🟨 JavaScript</option>
                        <option value="go">🐹 Go</option>
                        <option value="rust">🦀 Rust</option>
                    </select>
                    <button class="editor-btn run" id="runButton">▶️ 运行</button>
                    <div class="run-status" id="runStatus" style="display: none;">
                        <div class="status-spinner"></div>
                        <span>执行中...</span>
                    </div>
                    <button class="editor-btn example" id="exampleButton">📝 示例</button>
                    <button class="editor-btn save">💾 保存</button>
                    <button class="editor-btn format">🔧 格式化</button>
                    <button class="editor-btn settings">⚙️ 设置</button>
                </div>
                
                <div class="code-editor-container">
                    <div class="code-lines" id="codeLines">
                        <div class="line-number">1</div>
                    </div>
                    <textarea class="code-editor" id="codeEditor" placeholder="在这里编写你的代码..." spellcheck="false">print("Hello, World!")
print("Welcome to InsCode!")

# 这是一个简单的Python示例
def greet(name):
    return f"Hello, {name}!"

# 调用函数
result = greet("Developer")
print(result)

# 简单的计算
numbers = [1, 2, 3, 4, 5]
total = sum(numbers)
print(f"Sum of numbers: {total}")</textarea>
                </div>
            </div>
        </div>

        <!-- 右侧 AI 助手面板 -->
        <div class="right-panel">
            <div class="ai-header">
                <div class="ai-title">Inscode AI</div>
                <div class="ai-subtitle">智能代码助手，随时为您提供帮助</div>
            </div>
            
            <div class="ai-chat">
                <div class="chat-message">
                    <div class="message-avatar user">U</div>
                    <div class="message-content user">怎么运行不了</div>
                </div>
                
                <div class="chat-message">
                    <div class="message-avatar ai">AI</div>
                    <div class="message-content">
                        看起来你在尝试运行某个程序时遇到了问题。为了更好地帮助你解决"怎么运行不了"的问题，我需要更多信息：<br><br>
                        1. 你具体是在尝试运行什么程序或脚本？(比如是a.py吗？)<br>
                        2. 你使用的具体命令是什么？<br>
                        3. 你遇到了什么错误信息或现象？<br><br>
                        根据当前环境信息，我看到你的工作目录是/root/Python，里面有一个a.py文件。如果你是想运行这个Python文件，可以尝试以下步骤：<br><br>
                        1. 确保Python已安装: python3 --version 或 python --version<br>
                        2. 尝试运行: python3 a.py<br><br>
                        如果仍然有问题，请提供具体的错误信息，这样我可以更准确地帮你解决问题。
                    </div>
                </div>
                
                <div class="chat-message">
                    <div class="message-avatar ai">AI</div>
                    <div class="message-content">
                        <label style="display: flex; align-items: center; gap: 8px; cursor: pointer;">
                            <input type="checkbox" checked> √ 已完成
                        </label>
                    </div>
                </div>
                
                <div class="ai-actions">
                    <button class="ai-action-btn">▷ 运行预览</button>
                    <button class="ai-action-btn">查看代码</button>
                </div>
            </div>
            
            <div class="ai-input">
                <div class="input-container">
                    <textarea class="ai-textarea" placeholder="输入内容与AI对话，随时调整优化您的项目！" maxlength="1000"></textarea>
                    <div class="input-actions">
                        <div class="input-info">
                            <span>@</span>
                            <span>📷</span>
                            <span>0/1000</span>
                            <select style="border: none; background: transparent; color: var(--text-muted); font-size: 12px;">
                                <option>Deepseek-V3</option>
                            </select>
                        </div>
                        <button class="send-button">发送</button>
                    </div>
                </div>
            </div>
            
            <!-- 代码执行历史记录 -->
            <div class="execution-history">
                <div class="history-header">
                    <h4>执行历史</h4>
                    <button class="clear-history-btn" id="clearHistoryBtn">清空</button>
                </div>
                <div class="history-list" id="historyList">
                    <!-- 历史记录将在这里动态添加 -->
                </div>
            </div>
        </div>
    </div>

    <!-- 底部终端栏 -->
    <div class="bottom-panel">
        <div class="terminal-header">
            <div class="terminal-title">终端</div>
            <div class="terminal-actions">
                <button class="terminal-btn">+</button>
                <button class="terminal-btn">🗑️</button>
            </div>
        </div>
        
        <div class="terminal-content">
            <div class="terminal-line">
                <span class="terminal-prompt">$ </span>
                <span class="terminal-command">python3 a.py</span>
            </div>
            <div class="terminal-line">
                <span class="terminal-output">ssssssssssssssss</span>
            </div>
            <div class="terminal-line">
                <span class="terminal-prompt">$ </span>
            </div>
        </div>
    </div>

    <script>
        // 面板标签切换
        document.querySelectorAll('.panel-tab').forEach(tab => {
            tab.addEventListener('click', () => {
                // 移除所有活动状态
                document.querySelectorAll('.panel-tab').forEach(t => t.classList.remove('active'));
                document.querySelectorAll('.panel-section').forEach(s => s.classList.remove('active'));
                
                // 添加当前活动状态
                tab.classList.add('active');
                const targetSection = document.getElementById(tab.dataset.tab + '-section');
                if (targetSection) {
                    targetSection.classList.add('active');
                }
            });
        });

        // 文件项点击
        document.querySelectorAll('.file-item').forEach(item => {
            item.addEventListener('click', () => {
                document.querySelectorAll('.file-item').forEach(i => i.classList.remove('active'));
                item.classList.add('active');
                
                // 更新编辑器标签
                const fileName = item.dataset.file;
                const editorTab = document.querySelector('.editor-tab');
                if (editorTab) {
                    editorTab.querySelector('span').textContent = fileName;
                }
            });
        });

        // 标签关闭按钮
        document.querySelectorAll('.tab-close').forEach(closeBtn => {
            closeBtn.addEventListener('click', (e) => {
                e.stopPropagation();
                const tab = closeBtn.closest('.editor-tab');
                if (tab) {
                    tab.remove();
                }
            });
        });

        // 运行按钮
        const runButton = document.getElementById('runButton');
        const runStatus = document.getElementById('runStatus');
        
        if (runButton) {
            runButton.addEventListener('click', () => {
                if (codeEditor) {
                    const code = codeEditor.value;
                    if (!code.trim()) {
                        showNotification('请先输入代码', 'error');
                        return;
                    }
                    
                    // 显示运行状态
                    runButton.style.display = 'none';
                    runStatus.style.display = 'flex';
                    
                    // 调用真实的代码执行API
                    executeCode(code);
                }
            });
        }

        // 代码执行函数
        async function executeCode(code) {
            try {
                // 获取用户选择的语言
                const languageSelector = document.getElementById('languageSelector');
                const language = languageSelector ? languageSelector.value : 'python';
                
                // 调用后端API
                const response = await fetch('/api/run/advanced', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        code: code,
                        language: language,
                        userId: getCurrentUserId()
                    })
                });

                const result = await response.json();
                
                if (result.success) {
                    // 显示执行结果
                    displayExecutionResult(result.output, result.containerId, language);
                    showNotification('代码运行成功', 'success');
                    
                    // 添加到执行历史
                    addExecutionHistory(language, result.output, null, result.containerId);
                } else {
                    // 显示错误信息
                    displayExecutionError(result.error, language);
                    showNotification('代码运行失败', 'error');
                    
                    // 添加到执行历史
                    addExecutionHistory(language, null, result.error, result.containerId);
                }
                
            } catch (error) {
                console.error('代码执行失败:', error);
                const errorMessage = '网络错误或服务器异常: ' + error.message;
                displayExecutionError(errorMessage, 'unknown');
                showNotification('代码执行失败', 'error');
                
                // 添加到执行历史
                addExecutionHistory('unknown', null, errorMessage, null);
            } finally {
                // 恢复运行按钮显示
                runButton.style.display = 'flex';
                runStatus.style.display = 'none';
            }
        }

        // 根据文件名获取语言
        function getLanguageFromFileName(fileName) {
            const extension = fileName.split('.').pop()?.toLowerCase();
            const languageMap = {
                'py': 'python',
                'java': 'java',
                'cpp': 'cpp',
                'c': 'cpp',
                'js': 'javascript',
                'go': 'go',
                'rs': 'rust'
            };
            return languageMap[extension] || 'python';
        }

        // 获取当前用户ID
        function getCurrentUserId() {
            // 从用户菜单或localStorage获取用户ID
            const userAvatar = document.querySelector('.user-avatar');
            return userAvatar ? userAvatar.textContent : 'anonymous';
        }

        // 显示执行结果
        function displayExecutionResult(output, containerId, language) {
            // 在终端中显示命令和结果
            const terminalContent = document.querySelector('.terminal-content');
            if (terminalContent) {
                // 添加命令
                const commandLine = document.createElement('div');
                commandLine.className = 'terminal-line';
                const command = getExecutionCommand(language);
                commandLine.innerHTML = `
                    <span class="terminal-prompt">$ </span>
                    <span class="terminal-command">${command}</span>
                `;
                terminalContent.appendChild(commandLine);
                
                // 添加输出结果
                if (output && output.trim()) {
                    const outputLines = output.split('\n');
                    outputLines.forEach(line => {
                        if (line.trim()) {
                            const outputLine = document.createElement('div');
                            outputLine.className = 'terminal-line';
                            outputLine.innerHTML = `<span class="terminal-output">${line}</span>`;
                            terminalContent.appendChild(outputLine);
                        }
                    });
                }
                
                // 添加容器ID信息
                if (containerId) {
                    const containerInfo = document.createElement('div');
                    containerInfo.className = 'terminal-line';
                    containerInfo.innerHTML = `<span class="terminal-info">Container ID: ${containerId}</span>`;
                    terminalContent.appendChild(containerInfo);
                }
                
                // 添加新的提示符
                const promptLine = document.createElement('div');
                promptLine.className = 'terminal-line';
                promptLine.innerHTML = '<span class="terminal-prompt">$ </span>';
                terminalContent.appendChild(promptLine);
                
                // 滚动到底部
                terminalContent.scrollTop = terminalContent.scrollHeight;
            }
            
            // 在预览面板中显示结果
            const previewSection = document.getElementById('preview-section');
            if (previewSection) {
                previewSection.innerHTML = `
                    <div style="padding: 20px;">
                        <h3 style="margin-bottom: 16px; color: var(--text-primary);">代码执行结果</h3>
                        <div style="background: var(--bg-dark); color: var(--text-light); padding: 16px; border-radius: var(--radius-md); font-family: 'Courier New', monospace; white-space: pre-wrap; overflow-x: auto;">
                            ${output || '代码执行完成，无输出'}
                        </div>
                        ${containerId ? `<div style="margin-top: 12px; font-size: 12px; color: var(--text-muted);">容器ID: ${containerId}</div>` : ''}
                    </div>
                `;
            }
        }

        // 显示执行错误
        function displayExecutionError(error, language) {
            // 在终端中显示错误
            const terminalContent = document.querySelector('.terminal-content');
            if (terminalContent) {
                // 添加命令
                const commandLine = document.createElement('div');
                commandLine.className = 'terminal-line';
                const command = getExecutionCommand(language);
                commandLine.innerHTML = `
                    <span class="terminal-prompt">$ </span>
                    <span class="terminal-command">${command}</span>
                `;
                terminalContent.appendChild(commandLine);
                
                // 添加错误信息
                const errorLine = document.createElement('div');
                errorLine.className = 'terminal-line error';
                errorLine.innerHTML = `<span class="terminal-error">Error: ${error}</span>`;
                terminalContent.appendChild(errorLine);
                
                // 添加新的提示符
                const promptLine = document.createElement('div');
                promptLine.className = 'terminal-line';
                promptLine.innerHTML = '<span class="terminal-prompt">$ </span>';
                terminalContent.appendChild(promptLine);
                
                // 滚动到底部
                terminalContent.scrollTop = terminalContent.scrollHeight;
            }
            
            // 在预览面板中显示错误
            const previewSection = document.getElementById('preview-section');
            if (previewSection) {
                previewSection.innerHTML = `
                    <div style="padding: 20px;">
                        <h3 style="margin-bottom: 16px; color: var(--danger-color);">代码执行错误</h3>
                        <div style="background: #fee2e2; color: #991b1b; padding: 16px; border-radius: var(--radius-md); font-family: 'Courier New', monospace; white-space: pre-wrap; border-left: 4px solid var(--danger-color);">
                            ${error}
                        </div>
                    </div>
                `;
            }
        }

        // 根据语言获取执行命令
        function getExecutionCommand(language) {
            const commandMap = {
                'python': 'python3 main.py',
                'java': 'java -cp /code Main',
                'cpp': 'g++ -o main main.cpp && ./main',
                'javascript': 'node main.js',
                'go': 'go run main.go',
                'rust': 'cargo run'
            };
            return commandMap[language] || 'python3 main.py';
        }

        // AI 输入框
        const aiTextarea = document.querySelector('.ai-textarea');
        const sendButton = document.querySelector('.send-button');
        const charCount = document.querySelector('.input-info span:nth-child(3)');

        if (aiTextarea && sendButton && charCount) {
            aiTextarea.addEventListener('input', () => {
                const length = aiTextarea.value.length;
                charCount.textContent = `${length}/1000`;
                
                // 更新发送按钮状态
                sendButton.disabled = length === 0;
            });
        }

        // 发送消息
        if (sendButton && aiTextarea && charCount) {
            sendButton.addEventListener('click', () => {
                const message = aiTextarea.value.trim();
                if (!message) return;

                // 添加用户消息
                addChatMessage('user', message);
                
                // 清空输入框
                aiTextarea.value = '';
                charCount.textContent = '0/1000';
                sendButton.disabled = true;
                
                // 模拟AI回复
                setTimeout(() => {
                    addChatMessage('ai', '我收到了你的消息：' + message + '。让我为你提供帮助...');
                }, 1000);
            });
        }

        function addChatMessage(type, content) {
            const chatContainer = document.querySelector('.ai-chat');
            const messageDiv = document.createElement('div');
            messageDiv.className = 'chat-message fade-in';
            
            const avatar = type === 'user' ? '👤' : '🤖';
            const messageClass = type === 'user' ? 'user-message' : 'ai-message';
            
            messageDiv.innerHTML = `
                <div class="message-avatar">${avatar}</div>
                <div class="message-content ${messageClass}">
                    <div class="message-text">${content}</div>
                    <div class="message-time">${new Date().toLocaleTimeString()}</div>
                </div>
            `;
            
            chatContainer.appendChild(messageDiv);
            chatContainer.scrollTop = chatContainer.scrollHeight;
            
            // 添加动画效果
            setTimeout(() => {
                messageDiv.classList.add('show');
            }, 100);
        }

        // 回车发送消息
        if (aiTextarea && sendButton) {
            aiTextarea.addEventListener('keydown', (e) => {
                if (e.key === 'Enter' && !e.shiftKey) {
                    e.preventDefault();
                    sendButton.click();
                }
            });
        }

        // 文件上传功能
        const fileUploadBtn = document.querySelector('.file-upload');
        if (fileUploadBtn) {
            fileUploadBtn.addEventListener('click', () => {
                const input = document.createElement('input');
                input.type = 'file';
                input.multiple = true;
                input.accept = '*/*';
                
                input.onchange = (e) => {
                    const files = Array.from(e.target.files);
                    files.forEach(file => {
                        // 模拟文件添加到文件树
                        addFileToTree(file.name);
                    });
                };
                
                input.click();
            });
        }

        function addFileToTree(fileName) {
            const fileTree = document.querySelector('.file-tree');
            const fileItem = document.createElement('div');
            fileItem.className = 'file-item';
            fileItem.dataset.file = fileName;
            
            fileItem.innerHTML = `
                <span class="file-icon">📄</span>
                <span class="file-name">${fileName}</span>
            `;
            
            fileTree.appendChild(fileItem);
            
            // 添加点击事件
            fileItem.addEventListener('click', () => {
                document.querySelectorAll('.file-item').forEach(i => i.classList.remove('active'));
                fileItem.classList.add('active');
                
                // 更新编辑器标签
                const editorTab = document.querySelector('.editor-tab');
                if (editorTab) {
                    editorTab.querySelector('span').textContent = fileName;
                }
            });
        }

        // 新建文件功能
        const fileNewBtn = document.querySelector('.file-new');
        if (fileNewBtn) {
            fileNewBtn.addEventListener('click', () => {
                const fileName = prompt('请输入文件名：');
                if (fileName) {
                    addFileToTree(fileName);
                    
                    // 创建新的编辑器标签
                    const tabsContainer = document.querySelector('.editor-tabs');
                    if (tabsContainer) {
                        const newTab = document.createElement('div');
                        newTab.className = 'editor-tab';
                        newTab.dataset.tab = fileName.replace(/\s+/g, '-').toLowerCase();
                        
                        newTab.innerHTML = `
                            <span>${fileName}</span>
                            <span class="tab-close">×</span>
                        `;
                        
                        tabsContainer.appendChild(newTab);
                        
                        // 添加点击事件
                        newTab.addEventListener('click', () => {
                            document.querySelectorAll('.editor-tab').forEach(t => t.classList.remove('active'));
                            newTab.classList.add('active');
                        });
                        
                        // 添加关闭事件
                        const closeBtn = newTab.querySelector('.tab-close');
                        if (closeBtn) {
                            closeBtn.addEventListener('click', (e) => {
                                e.stopPropagation();
                                newTab.remove();
                            });
                        }
                    }
                }
            });
        }

        // 新建文件夹功能
        const folderNewBtn = document.querySelector('.folder-new');
        if (folderNewBtn) {
            folderNewBtn.addEventListener('click', () => {
                const folderName = prompt('请输入文件夹名：');
                if (folderName) {
                    const fileTree = document.querySelector('.file-tree');
                    if (fileTree) {
                        const folderItem = document.createElement('div');
                        folderItem.className = 'file-item folder';
                        folderItem.dataset.folder = folderName;
                        
                        folderItem.innerHTML = `
                            <span class="file-icon">📁</span>
                            <span class="file-name">${folderName}</span>
                        `;
                        
                        fileTree.appendChild(folderItem);
                    }
                }
            });
        }

        // 下载文件功能
        document.querySelector('.file-download').addEventListener('click', () => {
            const activeFile = document.querySelector('.file-item.active');
            if (activeFile) {
                const fileName = activeFile.dataset.file;
                // 由于代码编辑器结构改变，暂时使用固定内容
                const content = 'print("ssssssssssssssss")';
                
                const blob = new Blob([content], { type: 'text/plain' });
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = fileName;
                a.click();
                URL.revokeObjectURL(url);
            } else {
                alert('请先选择一个文件');
            }
        });

        // 终端输入功能 - 暂时注释掉，因为HTML中没有terminal-input元素
        // const terminalInput = document.querySelector('.terminal-input');
        // if (terminalInput) {
        //     terminalInput.addEventListener('keydown', (e) => {
        //         if (e.key === 'Enter') {
        //             const command = terminalInput.value.trim();
        //             if (command) {
        //                 // 添加命令到终端
        //                 const terminalContent = document.querySelector('.terminal-content');
        //                 const commandLine = document.createElement('div');
        //                 commandLine.className = 'terminal-line';
        //                 commandLine.innerHTML = `
        //                     <span class="terminal-prompt">$ </span>
        //                     <span class="terminal-command">${command}</span>
        //                 `;
        //                 terminalContent.appendChild(commandLine);
        //                 
        //                 // 模拟命令执行
        //                 setTimeout(() => {
        //                     const outputLine = document.createElement('div');
        //                         outputLine.className = 'terminal-line';
        //                         outputLine.innerHTML = `<span class="terminal-output">执行命令: ${command}</span>`;
        //                         terminalContent.appendChild(outputLine);
        //                         
        //                         const promptLine = document.createElement('div');
        //                         promptLine.className = 'terminal-line';
        //                         promptLine.innerHTML = '<span class="terminal-prompt">$ </span>';
        //                         terminalContent.appendChild(promptLine);
        //                         
        //                         // 滚动到底部
        //                         terminalContent.scrollTop = terminalContent.scrollHeight;
        //                     }, 500);
        //                     
        //                     // 清空输入框
        //                     terminalInput.value = '';
        //                 }
        //             }
        //         });
        //     }
        // }

        // 代码编辑器功能增强
        const codeEditor = document.querySelector('#codeEditor');
        
        // 自动保存功能
        let autoSaveTimer;
        codeEditor.addEventListener('input', () => {
            clearTimeout(autoSaveTimer);
            autoSaveTimer = setTimeout(() => {
                // 模拟自动保存
                console.log('自动保存代码...');
                showNotification('代码已自动保存', 'success');
            }, 2000);
            
            // 更新行号
            updateLineNumbers();
            
            // 同步滚动
            syncScroll();
        });
        // 
        // 自动行号功能
        function updateLineNumbers() {
            const codeLines = document.querySelector('#codeLines');
            const lines = codeEditor.value.split('\n');
            
            // 清空现有行号
            codeLines.innerHTML = '';
            
            // 添加新的行号
            for (let i = 1; i <= Math.max(lines.length, 1); i++) {
                const lineNumber = document.createElement('div');
                lineNumber.className = 'line-number';
                lineNumber.textContent = i;
                codeLines.appendChild(lineNumber);
            }
        }
        // 
        // 初始化行号
        updateLineNumbers();
        
        // 同步滚动
        function syncScroll() {
            codeLines.scrollTop = codeEditor.scrollTop;
        }
        
        // 代码高亮（简单实现）
        // 代码高亮（简单实现）
        function applyBasicSyntaxHighlighting() {
            const code = codeEditor.value;
            // 这里可以集成专业的代码高亮库，如 Prism.js 或 highlight.js
            // 目前使用简单的颜色变化
            if (code.includes('def ') || code.includes('class ')) {
                codeEditor.style.color = '#d4d4d4';
            }
        }
        
        // 应用语法高亮
        codeEditor.addEventListener('input', applyBasicSyntaxHighlighting);
        
        // 添加代码高亮样式
        const style = document.createElement('style');
        style.textContent = `
            .code-editor {
                color: #d4d4d4 !important;
            }
            .code-editor .keyword { color: #569cd6; }
            .code-editor .string { color: #ce9178; }
            .code-editor .comment { color: #6a9955; }
            .code-editor .function { color: #dcdcaa; }
            .code-editor .number { color: #b5cea8; }
        `;
        document.head.appendChild(style);
        
        // Tab键支持
        codeEditor.addEventListener('keydown', (e) => {
            if (e.key === 'Tab') {
                e.preventDefault();
                const start = codeEditor.selectionStart;
                const end = codeEditor.selectionEnd;
                
                // 插入4个空格
                codeEditor.value = codeEditor.value.substring(0, start) + '    ' + codeEditor.value.substring(end);
                
                // 设置光标位置
                codeEditor.selectionStart = codeEditor.selectionEnd = start + 4;
            }
            
            // 自动缩进
            if (e.key === 'Enter') {
                const currentLine = codeEditor.value.substring(0, codeEditor.selectionStart).split('\n').pop();
                const indentMatch = currentLine.match(/^(\s*)/);
                const indent = indentMatch ? indentMatch[1] : '';
                
                // 如果当前行以冒号结尾，增加缩进
                if (currentLine.trim().endsWith(':')) {
                    setTimeout(() => {
                        const currentPos = codeEditor.selectionStart;
                        codeEditor.value = codeEditor.value.substring(0, currentPos) + indent + '    ' + codeEditor.value.substring(currentPos);
                        codeEditor.selectionStart = codeEditor.selectionEnd = currentPos + indent.length + 4;
                    }, 0);
                }
            }
        });

        // 保存按钮功能
        const saveButton = document.querySelector('.editor-btn.save');
        if (saveButton) {
            saveButton.addEventListener('click', () => {
                console.log('保存文件...');
                showNotification('文件已保存', 'success');
            });
        }

        // 格式化按钮功能
        const formatButton = document.querySelector('.editor-btn.format');
        if (formatButton) {
            formatButton.addEventListener('click', () => {
                if (codeEditor) {
                    // 简单的代码格式化（Python）
                    let code = codeEditor.value;
                    
                    // 移除多余的空行
                    code = code.replace(/\n\s*\n\s*\n/g, '\n\n');
                    
                    // 确保函数定义前后有空行
                    code = code.replace(/(\n)(def\s+\w+)/g, '\n\n$2');
                    
                    // 确保类定义前后有空行
                    code = code.replace(/(\n)(class\s+\w+)/g, '\n\n$2');
                    
                    codeEditor.value = code;
                    updateLineNumbers();
                    showNotification('代码已格式化', 'success');
                }
            });
        }

        // 示例按钮
        const exampleButton = document.getElementById('exampleButton');
        if (exampleButton) {
            exampleButton.addEventListener('click', () => {
                const languageSelector = document.getElementById('languageSelector');
                const language = languageSelector ? languageSelector.value : 'python';
                const exampleCode = getExampleCode(language);
                
                if (codeEditor) {
                    codeEditor.value = exampleCode;
                    showNotification(`已加载 ${language} 示例代码`, 'success');
                }
            });
        }

        // 获取示例代码
        function getExampleCode(language) {
            const examples = {
                'python': `# Python 示例代码
print("Hello, World!")

# 定义一个简单的函数
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

# 计算斐波那契数列
for i in range(10):
    print(f"fibonacci({i}) = {fibonacci(i)}")

# 列表操作
numbers = [1, 2, 3, 4, 5]
squares = [x**2 for x in numbers]
print(f"Numbers: {numbers}")
print(f"Squares: {squares}")`,

                'java': `// Java 示例代码
public class Main {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
        
        // 计算斐波那契数列
        for (int i = 0; i < 10; i++) {
            System.out.println("fibonacci(" + i + ") = " + fibonacci(i));
        }
        
        // 数组操作
        int[] numbers = {1, 2, 3, 4, 5};
        System.out.print("Numbers: ");
        for (int num : numbers) {
            System.out.print(num + " ");
        }
        System.out.println();
    }
    
    public static int fibonacci(int n) {
        if (n <= 1) return n;
        return fibonacci(n-1) + fibonacci(n-2);
    }
}`,

                'cpp': `// C++ 示例代码
#include <iostream>
#include <vector>
using namespace std;

int fibonacci(int n) {
    if (n <= 1) return n;
    return fibonacci(n-1) + fibonacci(n-2);
}

int main() {
    cout << "Hello, World!" << endl;
    
    // 计算斐波那契数列
    for (int i = 0; i < 10; i++) {
        cout << "fibonacci(" << i << ") = " << fibonacci(i) << endl;
    }
    
    // 向量操作
    vector<int> numbers = {1, 2, 3, 4, 5};
    cout << "Numbers: ";
    for (int num : numbers) {
        cout << num << " ";
    }
    cout << endl;
    
    return 0;
}`,

                'javascript': `// JavaScript 示例代码
console.log("Hello, World!");

// 定义一个简单的函数
function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n-1) + fibonacci(n-2);
}

// 计算斐波那契数列
for (let i = 0; i < 10; i++) {
    console.log(\`fibonacci(\${i}) = \${fibonacci(i)}\`);
}

// 数组操作
const numbers = [1, 2, 3, 4, 5];
const squares = numbers.map(x => x ** 2);
console.log("Numbers:", numbers);
console.log("Squares:", squares);

// 异步操作示例
setTimeout(() => {
    console.log("异步操作完成！");
}, 1000);`,

                'go': `// Go 示例代码
package main

import "fmt"

func fibonacci(n int) int {
    if n <= 1 {
        return n
    }
    return fibonacci(n-1) + fibonacci(n-2)
}

func main() {
    fmt.Println("Hello, World!")
    
    // 计算斐波那契数列
    for i := 0; i < 10; i++ {
        fmt.Printf("fibonacci(%d) = %d\\n", i, fibonacci(i))
    }
    
    // 切片操作
    numbers := []int{1, 2, 3, 4, 5}
    fmt.Printf("Numbers: %v\\n", numbers)
    
    // 计算平方
    for i, num := range numbers {
        fmt.Printf("numbers[%d]² = %d\\n", i, num*num)
    }
}`,

                'rust': `// Rust 示例代码
fn fibonacci(n: u32) -> u32 {
    match n {
        0 => 0,
        1 => 1,
        _ => fibonacci(n - 1) + fibonacci(n - 2),
    }
}

fn main() {
    println!("Hello, World!");
    
    // 计算斐波那契数列
    for i in 0..10 {
        println!("fibonacci({}) = {}", i, fibonacci(i));
    }
    
    // 向量操作
    let numbers = vec![1, 2, 3, 4, 5];
    println!("Numbers: {:?}", numbers);
    
    // 迭代器操作
    let squares: Vec<u32> = numbers.iter().map(|x| x * x).collect();
    println!("Squares: {:?}", squares);
}`
            };
            
            return examples[language] || examples['python'];
        }

        // 快捷键支持
        document.addEventListener('keydown', (e) => {
            // Ctrl+S 保存
            if (e.ctrlKey && e.key === 's') {
                e.preventDefault();
                if (saveButton) saveButton.click();
            }
            
            // Ctrl+N 新建
            if (e.ctrlKey && e.key === 'n') {
                e.preventDefault();
                document.querySelector('.file-new').click();
            }
            
            // Ctrl+O 打开
            if (e.ctrlKey && e.key === 'o') {
                e.preventDefault();
                document.querySelector('.file-upload').click();
            }
            
            // Ctrl+F 格式化
            if (e.ctrlKey && e.key === 'f') {
                e.preventDefault();
                if (formatButton) formatButton.click();
            }
        });

        // 响应式设计
        function handleResize() {
            const width = window.innerWidth;
            
            if (width < 768) {
                // 移动端布局
                document.body.classList.add('mobile');
            } else {
                document.body.classList.remove('mobile');
            }
        }

        window.addEventListener('resize', handleResize);
        handleResize();

        // 主题切换功能
        const themeToggle = document.querySelector('.theme-toggle');
        if (themeToggle) {
            themeToggle.addEventListener('click', () => {
                document.body.classList.toggle('dark-theme');
                const isDark = document.body.classList.contains('dark-theme');
                themeToggle.innerHTML = isDark ? '☀️' : '🌙';
            });
        }

        // 底部状态栏功能
        const terminalStatus = document.querySelector('.status-left .status-item');
        const terminalBtn = document.querySelector('.status-left .status-btn');
        
        if (terminalStatus && terminalBtn) {
            terminalStatus.addEventListener('click', () => {
                // 切换终端显示状态
                const bottomPanel = document.querySelector('.bottom-panel');
                if (bottomPanel) {
                    bottomPanel.style.display = bottomPanel.style.display === 'none' ? 'flex' : 'none';
                    terminalStatus.textContent = bottomPanel.style.display === 'none' ? '终端' : '隐藏终端';
                }
            });
            
            terminalBtn.addEventListener('click', () => {
                // 新建终端标签
                const terminalContent = document.querySelector('.terminal-content');
                if (terminalContent) {
                    const newTerminal = document.createElement('div');
                    newTerminal.className = 'terminal-line';
                    newTerminal.innerHTML = '<span class="terminal-prompt">$ </span>';
                    terminalContent.appendChild(newTerminal);
                    terminalContent.scrollTop = terminalContent.scrollHeight;
                }
            });
        }

        // 通知函数
        function showNotification(message, type = 'info') {
            const notification = document.createElement('div');
            notification.className = `notification ${type}`;
            notification.textContent = message;
            notification.style.cssText = `
                position: fixed;
                top: 80px;
                right: 20px;
                padding: 12px 20px;
                border-radius: 6px;
                color: white;
                font-size: 14px;
                z-index: 10000;
                animation: slideInRight 0.3s ease;
                background: ${type === 'success' ? '#10b981' : type === 'error' ? '#ef4444' : '#3b82f6'};
            `;
            
            document.body.appendChild(notification);
            
            setTimeout(() => {
                notification.style.animation = 'slideOutRight 0.3s ease';
                setTimeout(() => {
                    if (notification.parentNode) {
                        notification.parentNode.removeChild(notification);
                    }
                }, 300);
            }, 3000);
        }

        // 初始化页面
        console.log('在线IDE页面初始化完成！');
        
        // 初始化代码执行功能
        initializeCodeExecution();
        
        // 隐藏加载动画
        setTimeout(() => {
            const pageLoading = document.getElementById('pageLoading');
            if (pageLoading) {
                pageLoading.classList.add('hidden');
                setTimeout(() => {
                    pageLoading.style.display = 'none';
                }, 500);
            }
            document.body.classList.add('loaded');
        }, 1500);

        // 初始化代码执行功能
        function initializeCodeExecution() {
            // 设置默认语言
            const languageSelector = document.getElementById('languageSelector');
            if (languageSelector) {
                languageSelector.value = 'python';
            }
            
            // 加载默认示例代码
            if (codeEditor) {
                const defaultCode = getExampleCode('python');
                codeEditor.value = defaultCode;
            }
            
            console.log('代码执行功能初始化完成');
        }

        // 错误处理
        window.addEventListener('error', (e) => {
            console.error('页面错误:', e.error);
            // 可以在这里添加错误提示UI
        });

        // 未处理的Promise拒绝
        window.addEventListener('unhandledrejection', (e) => {
            console.error('未处理的Promise拒绝:', e.reason);
            // 可以在这里添加错误提示UI
        });

        // 页面可见性变化
        document.addEventListener('visibilitychange', () => {
            if (document.hidden) {
                console.log('页面隐藏，暂停一些功能');
            } else {
                console.log('页面显示，恢复功能');
            }
        });

        // 语言选择器
        const languageSelector = document.getElementById('languageSelector');
        if (languageSelector) {
            languageSelector.addEventListener('change', () => {
                const language = languageSelector.value;
                const currentCode = codeEditor.value;
                
                // 如果当前代码是空的或者是默认的Python代码，则自动加载新语言的示例
                if (!currentCode.trim() || currentCode.includes('# Python 示例代码')) {
                    const exampleCode = getExampleCode(language);
                    codeEditor.value = exampleCode;
                    showNotification(`已切换到 ${language} 语言`, 'info');
                } else {
                    showNotification(`语言已切换到 ${language}，请确保代码语法正确`, 'info');
                }
            });
        }

        // 清空历史记录按钮
        const clearHistoryBtn = document.getElementById('clearHistoryBtn');
        if (clearHistoryBtn) {
            clearHistoryBtn.addEventListener('click', () => {
                if (confirm('确定要清空所有执行历史吗？')) {
                    clearExecutionHistory();
                    showNotification('执行历史已清空', 'info');
                }
            });
        }

        // 添加执行历史记录
        function addExecutionHistory(language, output, error, containerId) {
            const historyList = document.getElementById('historyList');
            if (!historyList) return;

            const historyItem = document.createElement('div');
            const isSuccess = !error;
            const statusClass = isSuccess ? 'success' : 'error';
            const timestamp = new Date().toLocaleTimeString();
            
            // 截取输出内容用于显示
            const displayOutput = (isSuccess ? output : error) || '无输出';
            const shortOutput = displayOutput.length > 100 ? displayOutput.substring(0, 100) + '...' : displayOutput;
            
            historyItem.className = `history-item ${statusClass}`;
            historyItem.innerHTML = `
                <div class="history-item-header">
                    <span class="history-language">${language}</span>
                    <span class="history-time">${timestamp}</span>
                </div>
                <div class="history-output" title="点击查看完整内容">${shortOutput}</div>
                ${containerId ? `<div style="font-size: 10px; color: var(--text-muted); margin-top: 4px;">容器: ${containerId}</div>` : ''}
            `;
            
            // 点击展开/收起输出内容
            const outputElement = historyItem.querySelector('.history-output');
            outputElement.addEventListener('click', () => {
                if (outputElement.classList.contains('expanded')) {
                    outputElement.classList.remove('expanded');
                    outputElement.textContent = shortOutput;
                } else {
                    outputElement.classList.add('expanded');
                    outputElement.textContent = displayOutput;
                }
            });
            
            // 将新记录插入到列表顶部
            historyList.insertBefore(historyItem, historyList.firstChild);
            
            // 限制历史记录数量
            const maxHistoryItems = 10;
            const items = historyList.querySelectorAll('.history-item');
            if (items.length > maxHistoryItems) {
                items[items.length - 1].remove();
            }
        }

        // 清空执行历史记录
        function clearExecutionHistory() {
            const historyList = document.getElementById('historyList');
            if (historyList) {
                historyList.innerHTML = '';
            }
        }
    </script>

    <!-- 底部状态栏 -->
    <div class="bottom-statusbar">
        <div class="status-left">
            <span class="status-item">终端</span>
            <button class="status-btn">+</button>
        </div>
        <div class="status-center">
            <span class="status-item">AI 对话次数: 今日 1/5 累计1/20</span>
        </div>
        <div class="status-right">
            <button class="status-btn premium">开通年卡会员</button>
        </div>
    </div>
</body>
</html>